import React, {useState} from 'react';

export default function TodoContainer() {
  const [todos, setTodos] = useState([{
    id: 1,
    title: '学习JSX',
    completed: false
  }, {
    id: 2,
    title: '学习Component写法',
    completed: false
  }, {
    id: 3,
    title: '学习useState',
    completed: false
  }, {
    id: 4,
    title: '学习useEffect',
    completed: false
  }])
  const handleTodoComplete = (todo, checked) => {
    const newTodos = todos.map(td => {
      if (td.id === todo.id) {
        return { ...td, completed: checked}
      }
      return td
    })
    setTodos(newTodos)
  }
  return (
    <div style={{ marginTop: 20 }}>
      {todos.map(todo => (
        <li key={todo.id}><input type="checkbox" checked={todo.completed} onChange={(ev) => {
          handleTodoComplete(todo, ev.target.checked)
        }} />{todo.title}: {todo.completed ? '已完成' : <button style={{ marginLeft: 20 }}>删除</button>}</li>
      ))}
    </div>
  )
}
